iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

新手遇上Vue.js系列 第 3

Day3 條件判斷

  • 分享至 

  • xImage
  •  

今天來學學Vue裡面的判別式v-if 跟v-show

1. v - if
https://ithelp.ithome.com.tw/upload/images/20210917/20140076dMzIUOGfgf.png
https://ithelp.ithome.com.tw/upload/images/20210917/20140076B7YyqYCnXP.png
在這裡我們將條件設定為Show而下方判斷false時將會顯示不成立,相反的則會顯示成立,如果沒有設v-else就不會顯示出來

2. v-show
https://ithelp.ithome.com.tw/upload/images/20210917/20140076JYHXbkyiQT.png
https://ithelp.ithome.com.tw/upload/images/20210917/20140076S8FrjVWDPl.png

差異
v-if 跟 v-show的效果差不多相同
if是有條件的渲染,而show是無條件的渲染,可視情況是否有else的需求

最後來做個分數是否及格實例,當我的score只要>=60則顯示及格,反之不及格,並將判斷顯示在螢幕上
https://ithelp.ithome.com.tw/upload/images/20210917/20140076tEkt9GQexH.png
https://ithelp.ithome.com.tw/upload/images/20210917/20140076mCIyP8dbwT.png
https://ithelp.ithome.com.tw/upload/images/20210917/20140076eCJR4fBnhE.png

今天看完if跟show的差別,明天將會學習資料單向綁定的部分

參考資料https://www.youtube.com/watch?v=8O3teHziU_E


上一篇
Day2 讓我們開始吧
下一篇
Day 4 資料單向綁定
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言